JavaScript Symbol.wellKnown：精通內建符號協定

JavaScript 的 Symbol 是在 ECMAScript 2015 (ES6) 中引入的，它提供了一種獨特且不可變的原始型別，通常用作物件屬性的鍵。除了基本用途外，Symbol 還透過所謂的知名符號 (well-known symbols) 提供了一種強大的機制來自訂 JavaScript 物件的行為。這些符號是預先定義的 Symbol 值，以 Symbol 物件的靜態屬性形式暴露（例如 Symbol.iterator、Symbol.toStringTag）。它們代表 JavaScript 引擎使用的特定內部操作和協定。透過使用這些符號作為鍵來定義屬性，您可以攔截並覆寫預設的 JavaScript 行為。此功能開啟了高度的控制與自訂能力，使您能夠創建更靈活、更強大的 JavaScript 應用程式。

了解 Symbols

在深入研究知名符號之前，了解 Symbol 本身的基本知識至關重要。

什麼是 Symbols？

Symbol 是獨特且不可變的資料型別。每個 Symbol 都保證是不同的，即使它們是用相同的描述創建的。這使得它們非常適合用來創建類似私有的屬性或作為唯一的識別符。

            const sym1 = Symbol();
const sym2 = Symbol("description");
const sym3 = Symbol("description");

console.log(sym1 === sym2); // false
console.log(sym2 === sym3); // false
            

              
                Copy
              
            
          

為何使用 Symbols？

• 唯一性： 確保屬性鍵是唯一的，防止命名衝突。
• 隱私性： Symbol 預設是不可列舉的，提供了一定程度的資訊隱藏（雖然在最嚴格的意義上並非真正的隱私）。
• 可擴充性： 允許擴充內建的 JavaScript 物件，而不會干擾現有屬性。

Symbol.wellKnown 簡介

Symbol.wellKnown 並非單一屬性，而是對 Symbol 物件上代表特殊、語言層級協定的靜態屬性的統稱。這些符號提供了掛鉤 (hooks) 到 JavaScript 引擎內部操作的途徑。

以下是一些最常用的 Symbol.wellKnown 屬性的細分：

• Symbol.iterator
• Symbol.toStringTag
• Symbol.toPrimitive
• Symbol.hasInstance
• Symbol.species
• 字串匹配 Symbols: Symbol.match、Symbol.replace、Symbol.search、Symbol.split

深入探討特定的 Symbol.wellKnown 屬性

1. Symbol.iterator：使物件可迭代

Symbol.iterator 符號定義了一個物件的預設迭代器。如果一個物件定義了一個鍵為 Symbol.iterator 且其值為一個返回迭代器物件的函式，那麼該物件就是可迭代的。迭代器物件必須有一個 next() 方法，該方法返回一個具有兩個屬性的物件：value（序列中的下一個值）和 done（一個布林值，表示迭代是否完成）。

使用案例： 為您的資料結構自訂迭代邏輯。想像您正在建立一個自訂的資料結構，例如一個鏈結串列。透過實作 Symbol.iterator，您可以讓它與 for...of 迴圈、展開語法 (...) 以及其他依賴迭代器的結構一起使用。

範例：

            const myCollection = {
  items: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (const item of myCollection) {
  console.log(item);
}

console.log([...myCollection]); // [1, 2, 3, 4, 5]
            

              
                Copy
              
            
          

國際類比： 把 Symbol.iterator 想像成定義存取集合中元素的「協定」，就像不同文化可能有不同的奉茶習俗——每種文化都有其自己的「迭代」方法。

2. Symbol.toStringTag：自訂 toString() 的表示方式

Symbol.toStringTag 符號是一個字串值，當在物件上呼叫 toString() 方法時，它被用作標籤。預設情況下，呼叫 Object.prototype.toString.call(myObject) 會返回 [object Object]。透過定義 Symbol.toStringTag，您可以自訂這種表示方式。

使用案例： 在檢查物件時提供更多資訊性的輸出。這對於除錯和日誌記錄特別有用，幫助您快速識別自訂物件的類型。

範例：

            class MyClass {
  constructor(name) {
    this.name = name;
  }
  get [Symbol.toStringTag]() {
    return 'MyClassInstance';
  }
}

const myInstance = new MyClass('Example');

console.log(Object.prototype.toString.call(myInstance)); // [object MyClassInstance]
            

              
                Copy
              
            
          

若沒有 Symbol.toStringTag，輸出將會是 [object Object]，這使得區分 MyClass 的實例變得更加困難。

國際類比： Symbol.toStringTag 就像一個國家的國旗——當遇到未知事物時，它提供了一個清晰簡潔的識別符。與其只說「人」，你可以透過看國旗說「來自日本的人」。

3. Symbol.toPrimitive：控制型別轉換

Symbol.toPrimitive 符號指定了一個函式值的屬性，該函式被呼叫以將物件轉換為原始值。當 JavaScript 需要將物件轉換為原始型別時，例如使用 +、== 等運算子，或者當函式期望一個原始型別參數時，就會調用此函式。

使用案例： 為您的物件在需要原始值的上下文中使用時定義自訂的轉換邏輯。您可以根據 JavaScript 引擎提供的「提示 (hint)」來優先考慮字串或數字的轉換。

範例：

            const myObject = {
  value: 10,
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return this.value;
    } else if (hint === 'string') {
      return `The value is: ${this.value}`;
    } else {
      return this.value * 2;
    }
  }
};

console.log(Number(myObject));   // 10
console.log(String(myObject));   // The value is: 10
console.log(myObject + 5);      // 15  (default hint is number)
console.log(myObject == 10);     // true

const dateLike = {
 [Symbol.toPrimitive](hint) {
 return hint == "number" ? 10 : "hello!";
 }
};

console.log(dateLike + 5);
console.log(dateLike == 10);

            

              
                Copy
              
            
          

國際類比： Symbol.toPrimitive 就像一個萬能翻譯機。它允許您的物件根據上下文「說」不同的「語言」（原始型別），確保在各種情況下都能被理解。

4. Symbol.hasInstance：自訂 instanceof 行為

Symbol.hasInstance 符號指定了一個方法，該方法用於確定一個建構函式物件是否將某個物件識別為其自身的實例。它被 instanceof 運算子使用。

使用案例： 為自訂類別或物件覆寫預設的 instanceof 行為。當您需要比標準原型鏈遍歷更複雜或更細緻的實例檢查時，這非常有用。

範例：

            class MyClass {
  static [Symbol.hasInstance](obj) {
    return !!obj.isMyClassInstance;
  }
}

const myInstance = { isMyClassInstance: true };
const notMyInstance = {};

console.log(myInstance instanceof MyClass);    // true
console.log(notMyInstance instanceof MyClass); // false
            

              
                Copy
              
            
          

通常，instanceof 會檢查原型鏈。在這個範例中，我們自訂了它來檢查 isMyClassInstance 屬性的存在。

國際類比： Symbol.hasInstance 就像一個邊境管制系統。它根據特定標準決定誰可以被視為「公民」（類別的實例），從而覆寫預設規則。

5. Symbol.species：影響衍生物件的創建

Symbol.species 符號用於指定一個建構函式，該建構函式應用於創建衍生物件。它允許子類別覆寫那些返回父類別新實例的方法（例如 Array.prototype.slice、Array.prototype.map 等）所使用的建構函式。

使用案例： 控制由繼承方法返回的物件類型。當您有一個自訂的類陣列類別，並且希望像 slice 這樣的方法返回您的自訂類別的實例，而不是內建的 Array 類別時，這特別有用。

範例：

            class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArray = new MyArray(1, 2, 3);
const slicedArray = myArray.slice(1);

console.log(slicedArray instanceof MyArray); // false
console.log(slicedArray instanceof Array); // true

class MyArray2 extends Array {
 static get [Symbol.species]() {
 return MyArray2;
 }
}

const myArray2 = new MyArray2(1, 2, 3);
const slicedArray2 = myArray2.slice(1);

console.log(slicedArray2 instanceof MyArray2); // true
console.log(slicedArray2 instanceof Array); // true

            

              
                Copy
              
            
          

在不指定 Symbol.species 的情況下，slice 會返回一個 Array 的實例。透過覆寫它，我們確保它返回一個 MyArray 的實例。

國際類比： Symbol.species 就像出生公民權。它決定了一個子物件屬於哪個「國家」（建構函式），即使它是由不同「國籍」的父母所生。

6. 字串匹配 Symbols：Symbol.match、Symbol.replace、Symbol.search、Symbol.split

這些符號（Symbol.match、Symbol.replace、Symbol.search 和 Symbol.split）允許您在物件與字串方法一起使用時自訂其行為。通常，這些方法是針對正規表示式操作的。透過在您的物件上定義這些符號，您可以讓它們在與這些字串方法一起使用時表現得像正規表示式一樣。

使用案例： 創建自訂的字串匹配或操作邏輯。例如，您可以創建一個代表特殊類型模式的物件，並定義它如何與 String.prototype.replace 方法互動。

範例：

            const myPattern = {
  [Symbol.match](string) {
    const index = string.indexOf('custom');
    return index >= 0 ? [ 'custom' ] : null;
  }
};

console.log('This is a custom string'.match(myPattern)); // [ 'custom' ]
console.log('This is a regular string'.match(myPattern)); // null

const myReplacer = {
  [Symbol.replace](string, replacement) {
    return string.replace(/custom/g, replacement);
  }
};

console.log('This is a custom string'.replace(myReplacer, 'modified')); // This is a modified string

            

              
                Copy
              
            
          

國際類比： 這些字串匹配 symbols 就像為不同語言配備了在地翻譯員。它們讓字串方法能夠理解並處理非標準正規表示式的自訂「語言」或模式。

實際應用與最佳實踐

• 函式庫開發： 使用 Symbol.wellKnown 屬性來創建可擴充和可自訂的函式庫。
• 資料結構： 為您的資料結構實作自訂迭代器，使其更容易與標準 JavaScript 結構一起使用。
• 除錯： 利用 Symbol.toStringTag 來提高除錯輸出的可讀性。
• 框架與 API： 使用這些符號來與現有的 JavaScript 框架和 API 實現無縫整合。

考量與注意事項

• 瀏覽器相容性： 雖然大多數現代瀏覽器都支援 Symbol 和 Symbol.wellKnown 屬性，但請確保為舊版環境提供適當的 polyfill。
• 複雜性： 過度使用這些功能可能導致程式碼更難理解和維護。請謹慎使用，並詳盡地記錄您的自訂。
• 安全性： 雖然 Symbol 提供了一定程度的隱私，但它們並非萬無一失的安全機制。有決心的攻擊者仍然可以透過反射存取以 Symbol 為鍵的屬性。

結論

Symbol.wellKnown 屬性提供了一種強大的方式來自訂 JavaScript 物件的行為，並將它們更深入地與語言的內部機制整合。透過理解這些符號及其使用案例，您可以創建更靈活、可擴充且穩健的 JavaScript 應用程式。然而，請記住要謹慎使用它們，並考慮到潛在的複雜性和相容性問題。擁抱知名符號的力量，在您的 JavaScript 程式碼中解鎖新的可能性，並將您的程式設計技能提升到一個新的水平。始終努力編寫乾淨、文件齊全的程式碼，以便他人（以及未來的您自己）易於理解和維護。考慮為開源專案做出貢獻，或與社群分享您的知識，以幫助他人學習並從這些進階 JavaScript 概念中受益。